<template>
	<view class="content">
		<view class="header flex">
			<view class="img">
				<image src="../../static/index/04.png"></image>
			</view>
			<view class="name">重庆 · 梁平</view>
		</view>
		<view class="banner">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item>
					<view class="swiper-item uni-bg-red">
						<image src="../../static/index/banner.png" style="width: 100%; height: 100%" mode="aspectFill"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-green">
						<image src="../../static/index/banner.png" style="width: 100%; height: 100%" mode="aspectFill"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-blue">
						<image src="../../static/index/banner.png" style="width: 100%; height: 100%" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="notice flex">
			<view class="notice_name">公告</view>
			<view class="text">关于数字民宗事务管理APP应用条款更新项目.</view>
			<view class="time">2023-10-20</view>
		</view>
		<view class="report">
			<view class="report_wrap flex">
				<view class="left_img">
					<image src="../../static/index/index_people.png"></image>
				</view>
				<view class="center_wrap flex">
					<view class="key_report">一键举报</view>
					<view class="line">
						<image src="../../static/index/line.png"></image>
					</view>
					<view class="please">紧急举报请点击</view>
				</view>
				<view class="left_img2">
					<image src="../../static/index/index_home.png"></image>
				</view>
			</view>
		</view>
		<view class="active flex">
			<view class="reporting flex">
				<view class="active_wrap">
					<view class="text">活动报备</view>
					<view class="system">活动报备系统</view>
				</view>
				<view class="active_img">
					<image src="../../static/index/index_ld.png"></image>
				</view>
			</view>
			<view class="reporting flex" @click="hanleport">
				<view class="active_wrap">
					<view class="text">快捷举报</view>
					<view class="system">详情填写入口</view>
				</view>
				<view class="active_img">
					<image src="../../static/index/index_jb.png"></image>
				</view>
			</view>
		</view>
		<view class="nation_wrap flex">
			<view class="line_box flex">
				<view class="line"></view>
				<view class="name_text">民族活动</view>
			</view>
			<view class="more">查看更多 ></view>
		</view>
		<view class="active_list">
			<view class="active_wrap flex">
				<view class="img_active">
					<image src="" mode="aspectFill"></image>
				</view>
				<view class="details">
					<view class="title_text">佛光寺，创建于北魏孝文帝时期,地处于五台山，在历史的记录之中，早期则是神</view>
					<view class="broadcast_wrap flex">
						<view class="broadcast flex">
							<image src="../../static/img/config/broadcast.png"></image>
							<view class="text">播报</view>
						</view>
						<view class="time">2023-10-20</view>
					</view>
				</view>
			</view>
			<view class="active_wrap flex">
				<view class="img_active">
					<image src="" mode="aspectFill"></image>
				</view>
				<view class="details">
					<view class="title_text">罗汉寺:重庆主城最繁荣高楼大厦环绕之间，就有一座藏于城市繁华深处的古香</view>
					<view class="broadcast_wrap flex">
						<view class="broadcast flex">
							<image src="../../static/img/config/broadcast.png"></image>
							<view class="text">播报</view>
						</view>
						<view class="time">2023-10-20</view>
					</view>
				</view>
			</view>
			<view class="seave">
				<image src="../../static/index/seave.png" mode="aspectFill"></image>
			</view>
			<view class="active_wrap flex">
				<view class="img_active">
					<image src="" mode="aspectFill"></image>
				</view>
				<view class="details">
					<view class="title_text">梁平双桂堂:独具魅力的“天下禅宗第一堂，因其在禅宗传播中的崇高地位被誉</view>
					<view class="broadcast_wrap flex">
						<view class="broadcast flex">
							<image src="../../static/img/config/broadcast.png"></image>
							<view class="text">播报</view>
						</view>
						<view class="time">2023-10-20</view>
					</view>
				</view>
			</view>
		</view>
		<view class="foot_box"></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			background: ['color1', 'color2', 'color3'],
			indicatorDots: true,
			autoplay: true,
			interval: 2000,
			duration: 500
		};
	},
	onLoad() {},
	methods: {
		change(e) {
			this.current = e.detail.current;
		},
		hanleport(){
			uni.navigateTo({
				url:'/pages/report/report'
			})
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	background-color: #fafafa;
}
.seave {
	width: 98%;
	height: 160rpx;
	margin: 0 auto;
	margin-top: 20rpx;
	margin-bottom: 20rpx;
	image {
		width: 100%;
		height: 100%;
	}
}
.foot_box {
	width: 100%;
	height: 200rpx;
}
.active_list {
	width: 98%;
	margin: 0 auto;
	border-radius: 0 0 10rpx 10rpx;
	background-color: #fff;
	.active_wrap {
		justify-content: flex-start;
		align-items: center;
		// margin-bottom: 6rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #fad9d9;
		border-radius: 10rpx;
		padding: 10rpx;
		.img_active {
			width: 25%;
			height: 140rpx;
			background-color: #c3c3c3;
			border-radius: 20rpx;
			margin-left: 1%;
			image {
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
			}
		}
		.details {
			width: 69%;
			height: 160rpx;
			margin-left: 3%;
			.title_text {
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				font-size: 30rpx;
				font-weight: 700;
			}
			.broadcast_wrap {
				justify-content: space-between;
				align-items: center;
				padding-top: 20rpx;
				.broadcast {
					justify-content: space-between;
					align-items: center;
					background-color: #fad9d9;
					padding: 4rpx 10rpx;
					border-radius: 30rpx;
					image {
						width: 26rpx;
						height: 26rpx;
						margin: 0 10rpx;
					}
					.text {
						color: #dd2d22;
						font-size: 24rpx;
						padding-right: 10rpx;
					}
				}
				.time {
					font-size: 24rpx;
					color: #8c8c8c;
				}
			}
		}
	}
}
.nation_wrap {
	width: 98%;
	margin: 0 auto;
	background-color: #fff;
	margin-top: 40rpx;
	padding: 20rpx 0;
	justify-content: space-between;
	align-items: center;
	border-radius: 10rpx 10rpx 0 0;
	.line_box {
		justify-content: flex-start;
		align-items: center;
		.line {
			width: 8rpx;
			height: 40rpx;
			background-color: #dd2d22;
			margin: 0 10rpx;
		}
		.name_text {
			font-size: 34rpx;
			font-weight: 700;
		}
	}
	.more {
		font-size: 24rpx;
		color: #8c8c8c;
		margin-right: 10rpx;
	}
}
.header {
	padding: 40rpx 0;
	align-items: center;
	background: linear-gradient(to bottom, #dd2d22, #e66358);

	.img {
		width: 40rpx;
		height: 40rpx;
		margin-left: 50rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.name {
		color: #fff;
		padding-left: 20rpx;
		font-size: 30rpx;
	}
}

.banner {
	width: 100%;
}
.notice {
	align-items: center;
	justify-content: space-between;
	padding: 30rpx 10rpx;
	.notice_name {
		background-color: #e66358;
		border-radius: 10rpx;
		padding: 2rpx 10rpx;
		color: #fff;
		font-size: 28rpx;
	}
	.text {
		width: 65%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 26rpx;
	}
	.time {
		font-size: 24rpx;
	}
}
.report {
	width: 98%;
	margin: 0 auto;
	background-color: #fff;
	padding: 40rpx 0;
	border-radius: 20rpx;
	box-shadow: 2rpx 2rpx 4rpx 2rpx #c3c3c3;
	.report_wrap {
		width: 70%;
		margin: 0 auto;
		align-items: center;
		justify-content: space-between;
		.left_img {
			width: 90rpx;
			height: 90rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.left_img2 {
			width: 120rpx;
			height: 110rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.center_wrap {
			justify-content: space-between;
			flex-direction: column;
			.key_report {
				font-size: 36rpx;
				font-weight: 700;
				text-align: center;
			}
			.please {
				font-size: 24rpx;
				color: #8c8c8c;
				text-align: center;
				margin-left: 30rpx;
			}
			.line {
				width: 300rpx;
				height: 30rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
}
.active {
	width: 98%;
	margin: 0 auto;
	justify-content: space-between;
	align-items: center;
	margin-top: 20rpx;
	.reporting {
		justify-content: space-between;
		width: 48%;
		padding: 40rpx 50rpx;
		background-color: #fff;
		border-radius: 20rpx;
		box-shadow: 2rpx 2rpx 4rpx 2rpx #c3c3c3;
		.active_wrap {
			.text {
				font-size: 36rpx;
				font-weight: 700;
			}
			.system {
				font-size: 24rpx;
				color: #8c8c8c;
			}
		}
		.active_img {
			width: 70rpx;
			height: 70rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
}

.uni-margin-wrap {
	width: 690rpx;
	width: 100%;
}
.swiper {
	height: 300rpx;
	background-color: #e66358;
}
.swiper-item {
	display: block;
	height: 300rpx;
	line-height: 300rpx;
	text-align: center;
}
.swiper-list {
	margin-top: 40rpx;
	margin-bottom: 0;
}
.uni-common-mt {
	margin-top: 60rpx;
	position: relative;
}
.info {
	position: absolute;
	right: 20rpx;
}
.uni-padding-wrap {
	width: 550rpx;
	padding: 0 100rpx;
}
</style>
